<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../../assert/css/font.css" th:href="@{/assert/css/font.css}"/>
    <link rel="stylesheet" href="../../../assert/css/bootstrap.min.css" th:href="@{/assert/css/bootstrap.min.css}"/>
    <link rel="stylesheet" href="../../../assert/css/plugin/chosen/chosen.css"
          th:href="@{/assert/css/plugin/chosen/chosen.css}"/>
    <link rel="stylesheet" href="../../../assert/css/bootstrap-table.css" th:href="@{/assert/css/bootstrap-table.css}"/>
    <link href="../../../assert/css/animate.min.css" rel="stylesheet" th:href="@{/assert/css/animate.min.css}">
    <link href="../../../assert/css/plugin/toastr/toastr.min.css" rel="stylesheet"
          th:href="@{/assert/css/plugin/toastr/toastr.min.css}">
    <link href="../../../assert/css/plugin/jsTree/themes/default/style.css" rel="stylesheet"
          th:href="@{/assert/css/plugin/jsTree/themes/default/style.css}">
    <link href="../../../assert/css/loaders.css" rel="stylesheet"
          th:href="@{/assert/css/loaders.css}">
    <link rel="stylesheet" href="../../../assert/css/city-picker.css" th:href="@{/assert/css/city-picker.css}"/>
    <link rel="stylesheet" href="../../../assert/css/jquery-ui.css" th:href="@{/assert/css/jquery-ui.css}"/>
    <link rel="stylesheet" href="../../../assert/js/laydate/theme/default/laydate.css" th:href="@{/assert/js/laydate/theme/default/laydate.css}"/>

    <link rel="stylesheet" href="../../../assert/css/index.css" th:href="@{/assert/css/index.css(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"/>

    <style>
        .search_group label.control-label{
            width:85px;
        }
        #myTable tbody tr{
            cursor: pointer;
        }
    </style>
</head>
<body>
<a id="basePath" th:href="@{/}"></a>
<div class="wrapper wrapper-content">
    <div class="ibox">
        <div class="tools_bar">
            <div class="pull-left">
                <a href="#" class="btn btn-default active" id="btnSearch" title="隐藏查询条"><i class="fa fa-filter"></i> 隐藏</a>
                <a href="#" class="btn btn-default active" id="refresh"><i class="fa fa-refresh"></i> 刷新</a>
            </div>
        </div>
        <div class="mapTitle" style="display: none">
            <span class="on">热词排行</span>
            <span>诉求排行</span>
        </div>
        <div id="barCharts" style="height:500px;margin-top: 26px;" class="charts">

        </div>
        <div class="table_box" style="display: none">
            <div class="table_tools">业务数据 <span class="downIcon" title="导出业务数据" id="export"></span></div>
            <table id="myTable"></table>
        </div>
        <div id="initTip" style="height:200px;display: none;line-height:200px;text-align:center;border: 1px solid #ddd;">亲，请选择必选条件哦！</div>
    </div>
</div>
<form action="" id="formDetail" class="hidden" target="_blank">
    <input type="text" id="keyName" name="keyName">
    <input type="text" id="taskIdL" name="taskId">
</form>
<form action="" id="exportForm" class="hidden" method="post">
    <input type="text" id="callStartTimeE" name="startTime">
    <input type="text" id="callEndTimeE" name="endTime">
    <input type="text" id="provinceCodeE" name="provinceCode">
</form>
<div id="taskId" class="hidden" th:text="${taskId}"></div>
<div id="taskName" class="hidden" th:text="${taskName}"></div>
<div id="contentType" class="hidden" th:text="${contentType}"></div>
<a href="" class="hidden J_menuItem" target="_blank" title="查看详情" data-href="/rest/page/relationChart" data-index="222"
   data-txt="关系图谱"></a>
<script src="../../../assert/js/jquery.js" th:src="@{/assert/js/jquery.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/echarts.min.js" th:src="@{/assert/js/echarts.min.js}"></script>
<script src="../../../assert/js/bootstrap.min.js" th:src="@{/assert/js/bootstrap.min.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/plugin/bootstrap-table/bootstrap-table.min.js"
        th:src="@{/assert/js/plugin/bootstrap-table/bootstrap-table.min.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/plugin/bootstrap-table/bootstrap-table-mobile.min.js"
        th:src="@{/assert/js/plugin/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
<script src="../../../assert/js/plugin/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"
        th:src="@{/assert/js/plugin/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<script src="../../../assert/js/plugin/toastr/toastr.min.js"
        th:src="@{/assert/js/plugin/toastr/toastr.min.js}"></script>
<script src="../../../assert/js/base.js" th:src="@{/assert/js/base.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/jquery-ui.min.js" th:src="@{/assert/js/jquery-ui.min.js}"></script>

<script src="../../../assert/js/changeTime.js" th:src="@{/assert/js/changeTime.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/plugin/jsTree/jstree.min.js"
        th:src="@{/assert/js/plugin/jsTree/jstree.min.js}"></script>
<script src="../../../assert/js/plugin/chosen/chosen.jquery.js"
        th:src="@{/assert/js/plugin/chosen/chosen.jquery.js}"></script>
<script src="../../../assert/js/contabs.min.js" th:src="@{/assert/js/contabs.min.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/common.js" th:src="@{/assert/js/common.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<!--<script src="../../../assert/js/plugin/city/city-picker.data.js" th:src="@{/assert/js/plugin/city/city-picker.data.js}"></script>-->
<!--<script src="../../../assert/js/plugin/city/city-picker.js" th:src="@{/assert/js/plugin/city/city-picker.js}"></script>-->
<script src="../../../assert/js/laydate/laydate.js" th:src="@{/assert/js/laydate/laydate.js}"></script>
<script src="../../../assert/js/plugin/citypicker/city-picker.js" th:src="@{/assert/js/plugin/citypicker/city-picker.js}"></script>
<script>
    //项目名称
    var basePath = $("#basePath").attr("href");
    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function (json) {
            $('#myTable').bootstrapTable("destroy");
            $('#myTable').bootstrapTable({
                data:json,
                pagination: true,                   //是否显示分页（*）
                sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                contentType: "application/x-www-form-urlencoded",
                strictSearch: true,
                showColumns: false,                  //是否显示所有的列
                showRefresh: false,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,
                cellStyle: {
                    css: {"background-color": "#fff"}
                },//是否显示父子表
                onClickRow: function (row, elem) {
                    $("#keyName").val(row.name);
                    $("#taskIdL").val($("#taskId").text());
                    var params1=$("#formDetail").serialize();
                    $(".J_menuItem").attr({
                        "href": basePath + "/rest/page/personalResultDetail?"+params1,
                        "data-txt":$("#taskName").text()+"-关系图谱",
                        "data-index":"关系图谱888"
                    }).click();
                },
                columns: [
                    {
                        align: "center",
                        halign: "center",
                        title: '序号',//标题  可不加
                        width: 60,
                        formatter: function (value, row, index) {
                            return (index + 1) + "";
                        }
                    },
                    {
                        align: "center",
                        halign: "center",
                        field: 'name',
                        title: '热词'
                    },
                    {
                        field: 'total',
                        title: '话务量',
                        align: "center",
                        halign: "center"
                    },
                    {
                        field: 'num',
                        title: '关键词出现次数',
                        align: "center",
                        halign: "center"
                    },
                    {
                        align: "center",
                        halign: "center",
                        field: 'percent',
                        title: '话务量占比'
                    },
                    {
                        align: "center",
                        halign: "center",
                        field: 'hb',
                        title: '话务量环比'
                    }
                ],
                onLoadSuccess: function (data) {  //加载成功时执行
                    if (!data.rows||data.rows.length == 0) {
                        var src=basePath+"/assert/image/nodata.png";
                        $(".no-records-found").find("td").html('<img src="'+src+'" th:src="@{/assert/image/nodata.png}" style="width:165px;" alt="">');
                    }
                },
                onLoadError: function () {  //加载失败时执行
                    var src=basePath+"/assert/image/nodata.png";
                    $(".no-records-found").find("td").html('<img src="'+src+'" th:src="@{/assert/image/nodata.png}" style="width:165px;" alt="">');
                },
                formatLoadingMessage: function () {
                    return '<div class="loaded">' +
                        '<div class="loader">' +
                        '<div class="loader-inner line-scale-pulse-out">' +
                        '<div></div>' +
                        '<div></div>' +
                        '<div></div>' +
                        '<div></div>' +
                        '<div></div>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '<div>请稍等，数据正在加载中...</div>';
                }
            });
        };
        return oTableInit;
    };
    var TableInit1 = function () {
        var oTableInit1 = new Object();
        //初始化Table
        oTableInit1.Init = function (json) {
            $('#myTable').bootstrapTable("destroy");
            $('#myTable').bootstrapTable({
                data:json,
                pagination: true,                   //是否显示分页（*）
                sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                contentType: "application/x-www-form-urlencoded",
                strictSearch: true,
                showColumns: false,                  //是否显示所有的列
                showRefresh: false,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,
                cellStyle: {
                    css: {"background-color": "#fff"}
                },//是否显示父子表
                columns: [
                    {
                        align: "center",
                        halign: "center",
                        title: '序号',//标题  可不加
                        width: 60,
                        formatter: function (value, row, index) {
                            return (index + 1) + "";
                        }
                    },
                    {
                        align: "center",
                        halign: "center",
                        field: 'name',
                        title: '诉求'
                    },
                    {
                        field: 'total',
                        title: '话务量',
                        align: "center",
                        halign: "center"
                    },
                    {
                        field: 'num',
                        title: '诉求出现次数',
                        align: "center",
                        halign: "center"
                    },
                    {
                        align: "center",
                        halign: "center",
                        field: 'percent',
                        title: '话务量占比'
                    },
                    {
                        align: "center",
                        halign: "center",
                        field: 'hb',
                        title: '话务量环比'
                    }
                ],
                onLoadSuccess: function (data) {  //加载成功时执行
                    if (!data.rows||data.rows.length == 0) {
                        var src=basePath+"/assert/image/nodata.png";
                        $(".no-records-found").find("td").html('<img src="'+src+'" th:src="@{/assert/image/nodata.png}" style="width:165px;" alt="">');
                    }
                },
                onLoadError: function () {  //加载失败时执行
                    var src=basePath+"/assert/image/nodata.png";
                    $(".no-records-found").find("td").html('<img src="'+src+'" th:src="@{/assert/image/nodata.png}" style="width:165px;" alt="">');
                },
                formatLoadingMessage: function () {
                    return '<div class="loaded">' +
                        '<div class="loader">' +
                        '<div class="loader-inner line-scale-pulse-out">' +
                        '<div></div>' +
                        '<div></div>' +
                        '<div></div>' +
                        '<div></div>' +
                        '<div></div>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '<div>请稍等，数据正在加载中...</div>';
                }
            });
        };
        return oTableInit1;
    };
    var resize = {
        init: function () {
            resize.me();
            $(window).resize(function () {
                resize.me();
                bar.myChart.resize();
            })
        },
        me: function () {
            var winW = $(window).width();
            var winH = $(window).height();
        }
    };
    var tools = {
        tableData: [],//表格数据
        reCallFlagArr: [],//重复来电
        agreeArr: [],//满意度
        sceneArr:[],//场景
        serviceClassifyArr:[],//业务分类
        proArr:[],//省市
        maxChartsNum:20,
        maxTablesNum:100,
        init: function () {
            if($("#contentType").text()==1){
                $(".mapTitle span").eq($("#contentType").text()).addClass("on").siblings().removeClass("on");
            }
            tools.export();
            tools.tabTitle();
        },
        export: function () {
            $("#export").on("click", function () {
                var index=$(".mapTitle span.on").index();
                var url="";
                if(index==0){
                    url="/exportExcel/monthWordTopExport";
                }else{
                    url="/exportExcel/monthAppealsExport";
                }
                if ($("#myTable").bootstrapTable("getData").length==0) {
                    toastrCog.error("没有可导出的数据哦！",3000)
                    return;
                }
                var form = $("#exportForm");
                $("#provinceCodeE").val($("#pro").val());
                $("#callStartTimeE").val($("#callStartTime").val());
                $("#callEndTimeE").val($("#callStartTime").val());
                window.open( bs.getSysConfig("SJWJ_URL_PRE").value+url+"?"+form.serialize())
            })

        },
        tabTitle:function(){
            $(".mapTitle span").on("click",function(){
                $(this).addClass("on").siblings().removeClass("on");
                var index=$(this).index();
                var url="";
                if(index==0){
                    url=bs.getSysConfig("SJWJ_URL_PRE").value+'/dataMining/monthWordsTop';

                }else{
                    url=bs.getSysConfig("SJWJ_URL_PRE").value+'/dataMining/monthAppeals';
                }
                getData.init(url,index);
            })
        }

    };
    var bar = {
        chart: null,
        data: null,
        dataList: null,
        valueList: null,
        option:{
//            title: {
//                text: '热词排行'
//            },
            color: ['#0c6bbf'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter: function (params) {
                    var name = params[0].name;
                    var data = params[0].value;
                    var hb = params[0].data.hb;
                    var zb = params[0].data.zb;
                    var hw = params[0].data.hw;
                    var str=name+"<br><span class='dot c1'></span>次数:"+data+"<br>";
                    if(hw){
                        str+="<span class='dot c2'></span>话务量:"+hw+"<br>";
                    }
                    if(zb){
                        str+="<span class='dot c3'></span>话务量占比:"+zb+"<br>";
                    }
                    if(hb){
                        str+="<span class='dot c4'></span>话务量环比:"+hb;
                    }
                    return str;
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
//            visualMap: {
//                type: 'continuous',
//                dimension: 1,
//                text: ['高','低'],
//                inverse: false,
//                itemHeight: 200,
//                calculable: true,
//                min: -2,
//                max: 6,
////                top:"auto",                                   //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
////                right:"auto",                               //组件离容器右侧的距离,'20%'
//                bottom:"-5",
//                left: "center",
//                orient:"horizontal",
//                hoverLink:true,
//                inRange: {
//                    colorLightness: [0.8, 0.4]
//                },
//                outOfRange: {
//                    color: '#000'
//                },
//                controller: {
//                    inRange: {
//                        color: '#0c6bbf'
//                    }
//                }
//            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '8%',
                containLabel: true
            },
            xAxis :[
                {
                    type : 'value'
                }
            ] ,
            yAxis : [
                {
                    type : 'category',
//                    min: "名字",
//                    max: "机主",
                    axisLine: {onZero: false},
                    data : [],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            dataZoom:[

            ],
            legend:{
                data:[]
            },
            series : [
                {
                    name:'直接访问',
                    type:'bar',
                    barWidth: '60%',
                    itemStyle:{
                        normal: {
                        },
                        emphasis: {
                            barBorderWidth: 2,
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowColor: 'rgba(0,0,0,0.5)'
                        }
                    },
                    label: {
                        show: true,
                        position: 'right',
                        offset:[5,0],
                        formatter: function (params) {
                            return params.value;
                        },
                        color: "#000"
                    },
                    data:[]
                }
            ]
        },
        init: function () {
            bar.myChart = echarts.init(document.getElementById('barCharts'));
//            bar.myChart.showLoading();
            bar.myChart.setOption(bar.option);
            bar.myChart.on('click', function (params) {
                if($(".mapTitle span.on").index()==1){
                    return
                }
                var key = params.name;
                $("#keyName").val(key);
                $("#taskIdL").val($("#taskId").text());
                var params1=$("#formDetail").serialize();
                $(".J_menuItem").attr({
                    "href": basePath + "/rest/page/personalResultDetail?"+params1,
                    "data-txt":$("#taskName").text()+"-关系图谱",
                    "data-index":"关系图谱888"
                }).click();
            })
        },
        renderOption:function(xArr,yArr){
            bar.option.xAxis[0].data=xArr;
            bar.option.yAxis[0].data=xArr;
            bar.option.series[0].data=yArr;
            if(yArr.length<10){
                bar.option.dataZoom=[{
                    show: false,
                    realtime: true
                }]
            }else {
                bar.renderdataZoom();
            }
            var codeType=$(".mapTitle span.on").index();
            if(codeType==0){
                bar.option.toolbox.feature.saveAsImage.name="无主题聚类热词量";
            }else{
                bar.option.toolbox.feature.saveAsImage.name="无主题聚类诉求量";
            }
            bar.myChart.setOption(bar.option);
        },
        renderdataZoom:function(){
            bar.option.dataZoom=[ {
                type: 'slider',
                yAxisIndex: 0,
                filterMode: 'empty',
                minSpan:20
            }]
        }
    };
    var getData={
        init:function(url,code){
            bar.myChart.showLoading();
            var pro=$("#pro").val();
            var params={
                taskId:$("#taskId").text()
            };
            $.ajax({
                type: "POST",
                url: url,
                dataType: "json",
                contentType: 'application/json',
                data:JSON.stringify(params),
                success: function (data) {
                    var result=data.data;
                    bar.myChart.clear();
                    bar.myChart.hideLoading();
                    if (result != null) {
                        var tableResult=result.concat([]);
                        if(result.length>tools.maxTablesNum){
                            tableResult=result.slice(0,tools.maxTablesNum);
                        }
                        if(code==0){
                            var oTable = new TableInit();
                            oTable.Init(tableResult);
                        }else{
                            var oTable1 = new TableInit1();
                            oTable1.Init(tableResult);
                        }

                        var chartsResult=result.concat([]);
                        if(result.length>tools.maxChartsNum){
                            chartsResult=result.slice(0,tools.maxChartsNum);
                        }
                        chartsResult.sort(bs.sortBy("num"));
                        var xAxisArr=[];
                        var series=[];
                        for(var i=0;i<chartsResult.length;i++){
                            var wordName=chartsResult[i].name;
                            var wordNum=chartsResult[i].num;
                            var hb=chartsResult[i].hb;
                            var zb=chartsResult[i].percent;
                            var total=chartsResult[i].total;
                            xAxisArr.push(wordName);
                            var obj={};
                            obj.name=wordName;
                            obj.value=wordNum;
                            obj.hb=hb;
                            obj.zb=zb;
                            obj.hw=total;
                            series.push(obj);
                        }
                        bar.renderOption(xAxisArr,series);
                    }
                }
            });
        },
        isLoadData:function(url,index){
            if($("#callStartTime").val()!="" && $("#pro").val()!=""){
                $("#barCharts").show();
                $(".mapTitle").show();
                $(".table_box").show();
                $("#initTip").hide();
                getData.init(url,index);//    获取数据
            }else{
                $("#barCharts").hide();
                $(".table_box").hide();
                $(".mapTitle").hide();
                $("#initTip").show();
            }
        },
    };
    $(function () {
        tools.init();
        bar.init();
        var oTable = new TableInit();
        oTable.Init([]);
        resize.init();
        var indexInit=$(".mapTitle span.on").index();
        var urlInit="";
        if(indexInit==0){
            urlInit=bs.getSysConfig("SJWJ_URL_PRE").value+'/dataMining/monthWordsTop';

        }else{
            urlInit=bs.getSysConfig("SJWJ_URL_PRE").value+'/dataMining/monthAppeals';
        }
        getData.isLoadData(urlInit, indexInit);
        menuWork.init();
    })
</script>
</body>
</html>